<template>
  <div class="wrapper">
    <div class="wrap">
      <div class="img-wrap"
           aspectratio
           w-750-290>
        <img v-lazy="shopInfo.images"
             alt=""
             aspectratio-content
             @click="handleDetail(shopInfo.id)">
      </div>
      <div class="shop-name-wrap">
        <div class="shop-name"
             @click="handleDetail(shopInfo.id)">{{shopInfo.name}} <span>（店铺编号：{{shopInfo.agent_number}}）</span></div>
        <div class="iconfont share-icon"
             @click.stop="handleShow">&#xe61a;</div>
      </div>
      <div class="distance"
           v-if="shopInfo.distance > 0">距离我：<span>{{shopInfo.distance}}km</span></div>
      <div class="address-wrap"
           @click.stop="handleLocation(shopInfo)">
        <div class="address">{{shopInfo.addr}}</div>
        <div class="iconfont icon">&#xe67c;</div>
      </div>
    </div>
  </div>

</template>
<script>
import commonWx from '@/assets/js/wx'
import _initShare from '@/assets/js/share'
export default {
  name: 'Shop',
  props: {
    shopInfo: {
      type: Object
    }
  },
  methods: {
    handleLocation (item) {
      commonWx.getOpenLocation(item.lat, item.lng, item.name, item.address)
    },
    handleDetail (id) {
      this.$router.push({
        path: `/detail/${id}`
      })
    },
    handleShow () {
      const path = this.$router.path
      path === '/home' ? _initShare('getShareHome') : _initShare('getShareWash')
      this.$emit('show', true)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.wrap
  width 100%
  position relative

.img-wrap
  margin-bottom 13px

.shop-name-wrap
  width 100%
  font-size $shop_name
  font-weight 500
  color $common_fz_color
  line-height 46px
  position relative
  display flex
  justify-content space-between
  padding()

  .shop-name
    flex 1
    min-width 0
    height 100%
    ellipsis()

  .share
    height 100%

.distance
  padding()
  font-size $address
  font-weight 500
  color $address_color
  line-height 46px

  span
    margin-left 10px

.address-wrap
  width 100%
  display flex
  justify-content space-between
  line-height 42px
  color $address_color
  font-weight 400
  font-size $address
  align-items center
  padding()

  .address
    width 100%
    ellipsis()

  .icon
    font-size $shop_name
    color $location
    margin-left 208px

.share-icon
  font-size 32px
  color #757575
</style>
